<template>
  <div class="Declare">
    <!-- 申请资料 -->
    <div class="title2">
      <div>【年审详情】</div>
      <div v-if="zhuangtai==0" style="color: #1CA9FF;">当前申报状态:待审核</div>
      <div v-if="zhuangtai==1" style="color: green;">当前申报状态:已通过</div>
      <div v-if="zhuangtai==2" style="color: red;">当前申报状态:已驳回</div>
      <div v-if="zhuangtai==3" style="color: #ef9f0b;">当前申报状态:审核中</div>
      <div v-if="zhuangtai==4" style="color: #A5A9AF;">当前申报状态:草稿</div>
      <div v-if="level==0">申报级别:国家级</div>
      <div v-if="level==1">申报级别:省级</div>
      <div v-if="level==2">申报级别:市级</div>
    </div>

    <div class="tableBox">

      <el-table :data="huixian" class="my-table" border style="width: 100%;" :disabled="true">
        <el-table-column width="60px" align="center" label="序号" type="index"  :label-class-name="'table-header'">

        </el-table-column>
        <el-table-column  width="300px" label="资料名称" prop="name" :label-class-name="'table-header'">
          <template slot-scope="scope">
            <span class="name">{{ scope.row.dataName | flitt()}}</span>
          </template>
        </el-table-column>
       
        <el-table-column align="center" label="资料上传" :label-class-name="'table-header'">
          <template slot-scope="{row}">
            <el-upload class="upload-demo" :action="https + 'zxqyfw/pub/fileUploadRecord/upload'" :on-preview="handlePreview"
              :data="uploadfile(row.name, '资料上传')" :headers="{ Authorization: token }" :before-upload="beforelod"
              :disabled="zhuangtai=='1' || zhuangtai=='3' || zhuangtai=='0' || (zhuangtai=='2' && row.pprovalStatus=='1') || (zhuangtai=='4' && row.pprovalStatus=='1')"
              :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row, row.dataName, '资料上传') }"
              :on-remove="(file, fileList) => handleRemove(file, fileList, row, 1)"  multiple
              :limit="3" :on-exceed="handleExceed" :accept="'.pdf'" :file-list="row.fileNameList">
              <el-icon class="iconDownload1" name="upload2" v-if="(zhuangtai=='2' && row.pprovalStatus == '2') || (zhuangtai=='2' && row.pprovalStatus == '0')||(zhuangtai=='4' && row.pprovalStatus == '2') ||  (zhuangtai=='4' || row.pprovalStatus=='0') "></el-icon>
              <span class="text1" v-if="(zhuangtai=='2' && row.pprovalStatus == '2') || (zhuangtai=='2' && row.pprovalStatus == '0')||(zhuangtai=='4' && row.pprovalStatus == '2') ||  (zhuangtai=='4' || row.pprovalStatus=='0') ">上传文件</span>
            </el-upload>
             <div v-if="zhuangtai==0||zhuangtai==1 ||zhuangtai==3 ">
            <!-- <p v-for="(item, index) in row.fileNameList" :key="index" style="cursor: pointer;" @click="handlePreview(item)">{{ item.fileName }}</p> -->
           </div>
          </template>
        </el-table-column>
         <el-table-column width="150" align="center" label="审核状态" prop="status" :label-class-name="'table-header'">
          <template slot-scope="scope" >
            <span class="status">{{ scope.row.pprovalStatus === 0 ? '待审核' : scope.row.pprovalStatus === 1 ? '已通过' : scope.row.pprovalStatus === 2 ? '已驳回' : '' }}</span>
            <p class="yijian" v-if="zhuangtai==1||zhuangtai==2" @click="open('审批意见',scope.row.approvalOpinion)">审批意见</p>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="tableFoot">
      <button v-if="zhuangtai==2" @click="submit(4,'保存成功')">保存</button>
      <button v-if="zhuangtai==4" @click="submit(4,'保存成功')">保存</button>
      <button v-if="zhuangtai==2" @click="submit(0,'提交成功')">提交</button>
      <button v-if="zhuangtai==4" @click="submit(0,'提交成功')">提交</button>
    </div>
  </div>
</template>
  
<script>
import { download, moban_list, upload_file, shifan_detail, getFileName, repeal, nianshen_add, nianshen_reset0,nianshen_reset1,nianshen_reset2, nianshen_detailList } from '../../api/api'
import { http } from '@/until/http';
export default {
  props: {
    propA: Object,
  },
  data() {
    return {
      https: http,
      //是否已申报
      isshenbao: 0,
      uploadData: {

      },
      resData: {},
      fileList: [],
      response: '',
      tableData: [],
      tableData2: [],
      token: '',
      upload: {
        "userId": this.$store.state.userId,
        "file1": { "1,年审1": [] },
        "file2": { "1,年审2": [] },
        "file3": { "2,年审3": [] },
        "file4": { "2,年审4": [] },
        "file5": { "3,年审5": [] },
        "file6": { "3,年审6": [] },
        "dataType": 0,
        "level": 0,
        "applicationType": 0,
        "pprovalStatus": ''
      },
      applicationType: '',
      tableData: [
        { id: '1', name: "年审1", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1656187754460225538' },
        { id: '2', name: "年审2", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1656187754460225538' },
        { id: '3', name: "年审3", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1656187754460225538' },
        { id: '4', name: "年审4", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1656187754460225538' },
        { id: '5', name: "年审5", status: "待审核", file: '上传文件', moban: '下载模板', zhengming: '上传辅助证明文件', fileId: '1656187754460225538' },
      ],
      type: '',
      level: '',
      //回显数组
      huixian: [],
      data: {
        userId: '',
        applicationType: '0',
        level: '0',
        dataType: '0'
      },
      huixianId: [],
      status:null,
      type:null,
      level:null,
      zhuangtai:null,
      reviewId:null,
    };
  },
  methods: {
    choseType(name) {
      if (name == '示范平台年审') {
        this.upload.applicationType = 0
      } else if (name == '示范基地年审') {
        this.upload.applicationType = 1
      } else if (name == '入驻机构年审') {
        this.upload.applicationType = 2
      }
    },
    choseLevel(name) {
      if (name == '国家级') {
        this.upload.level = 0
      } else if (name == '省级') {
        this.upload.level = 1
      } else if (name == '市级') {
        this.upload.level = 2
      }
    },
    //取消申报
    quxiao() {
      repeal({ id: this.huixian[0].applicationId }).then((res) => {
        console.log(res);
      })
    },
    uploadfile(rowname, type) {
      return { userId: this.$store.state.userId, name: rowname, type: type }
    },
    zancun() {
      console.log(this.fileList);
    },
    //提交表单
    open(title, yijian) {
      this.$alert(yijian, title, {
        confirmButtonText: '确定'
      });
    },
    //提交表单
    submit(state,name) {
      const data = this.huixian.reduce((prev, next, index) => {
        const startIndex = index ;
        const dataName =(next.id+',')+ next.dataName.split(',').pop();
        prev[`file${startIndex + 1}`] = {
          [dataName + '_资料上传']: next?.fileNameList?.map(item => item.fileId) || [],
        }
       
        return prev;
      }, {})
      data.userId = this.$store.state.userId;
      data.dataType = this.huixian[0].dataType;
      data.pprovalStatus = state
      data.applicationId = this.huixian[0].applicationId;
      data.applicationType=this.type
      data.level=this.level
      console.log(data);
      if(this.type==0){
        nianshen_reset0(data).then((res) => {
        if (res.data.state == '20000') {
          this.$message({
            message: name,
            type: 'success',
          });
          this.$router.push('/homepage');
        } else {
          this.$message.error(res.data.message);
        }
        
      })
      }
      if(this.type==1){
        nianshen_reset1(data).then((res) => {
        if (res.data.state == '20000') {
          this.$message({
            message: name,
            type: 'success',
          });
          setTimeout(()=>{
            location.reload()
          },700)
        } else {
          this.$message.error(res.data.message);
        }
        
      })
      }
      if(this.type==2){
        nianshen_reset2(data).then((res) => {
        if (res.data.state == '20000') {
          this.$message({
            message: name,
            type: 'success',
          });
          setTimeout(()=>{
            location.reload()
          },700)
        } else {
          this.$message.error(res.data.message);
        }
        
      })
      }
    },
    download(row) {
      console.log(row);
      download({ fileId: '1657779828016836609' }).then((res) => {
        // console.log(JSON.parse(res.data.type));
        let url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/vnd.ms-excel' }))
        let link = document.createElement("a")
        link.style.display = "none"
        link.href = url
        link.setAttribute("download", 'a.xls')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        console.log(link);
      })
    },
    beforelod() {

    },
    //点击删除按钮
    handleRemove(file, fileList, row, flag) {
      console.log(file, fileList, row)
      if (flag ===1) {
        row.fileNameList = row.fileNameList.filter(item => {
          return item.fileId !== file.fileId;
        })
      } else if (flag === 2) {
        row.axioyNameList = row.axioyNameList.filter(item => {
          return item.fileId !== file.fileId;
        })
      }
    },
    //预览文件
    handlePreview(file) {
       console.log(file);
      upload_file({ fileId: file.fileId }).then((res) => {
        console.log(res);
        let url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }))

        window.open(url)
      })
    },
    //超出限制
    handleExceed() {
      this.$message.warning('每一项只能上传3个文件');
    },
    //点击移除的对话框
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}?`);
    },
    detailList(){
      nianshen_detailList({ id: this.reviewId}).then((res) => {
      var dataLIst = res.data.data;
      console.log(dataLIst, res.data.data);
      dataLIst.forEach(item => {
        item.dataName = item.dataName.split('_').shift()
        item.fileNameList = []
        item.axioyNameList = []
        if (item.uploadDataFileId.length > 0) {
          item.uploadDataFileId = item.uploadDataFileId.split(',')
          item.uploadDataFileId.forEach((items) => {
            getFileName({ fileId: items }).then((res1) => {
              let obj = {
                fileId: items,
                fileName: res1.data.data,
                name: res1.data.data,
              }
              // console.log(item.fileNameList);
              item.fileNameList.push(JSON.parse(JSON.stringify(obj)))

            })

          })
        } else {
          item.uploadDataFileId = []
        }
      
      })

      this.huixian = dataLIst
      console.log(this.huixian);
      // setTimeout(() => {
      //   for (let index = 0; index <dataLIst.length; index++) {
      //     if(dataLIst[index].fileNameList[0]){
      //       this.huixianId.push(dataLIst[index].fileNameList[0].fileId)
      //       console.log(this.huixianId);
      //     }
      //   }
      // }, 1000);
    })
    },
    //上传成功的回调
    handleSuccess(response, file, fileList, row, name, type) {
      if (response && response.state == '20000') {
        console.log(response, file, fileList, row, name, type);
        if (type == '资料上传') {
          name = name + '_资料上传'
          console.log(row);
          row.fileNameList.push({
            fileId: response.data,
            ...file,
          })
          // for (var key in this.upload) {
          //   console.log(key);
          //   if (key.slice(4, 6) == (id * 2) - 1) {
          //     console.log(this.upload[key][name]);
          //     this.upload[key][name].push(response.data)
          //     // console.log( this.upload[key][name].push(response.data));
          //     console.log(this.upload);
          //   }
          // }
        }
      }

    }
  },
  filters: {
    flitt(name) {
      console.log(name);
      var name1 = name.split(',')
      var name2 = name1.shift()
      console.log(name2);
      return name1.toString()
    }
  },
  created() {
    this.token = localStorage.getItem('token')
    this.uploadData.userId = this.$store.state.userId
    console.log(this.huixian);
    moban_list({ applicationType: 0 }).then((res) => {
      console.log(res);
    })

  },
  watch: {
    propA: {
      handler: function (val, oldVal) {
        this.status = val
        this.reviewId=this.status.reviewId
        this.type = this.status.type
        this.level = this.status.level
        this.zhuangtai = this.status.status
        console.log(this.status);
        this.detailList()
      },
      // 深度观察监听
      immediate: true,
      deep: true,
    },
  },
  components: {
  }
}
</script>
  
<style scoped lang="scss">

::v-deep  .el-upload-list__item.is-success.focusing .el-icon-close-tip {
  display: none !important;
}
.tooltip {
  display: block;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.title2 {
     width: 100%;
     height: 40px;
     font-size: 18px;
     font-family: Microsoft YaHei;
     font-weight: bold;
     color: #1285D7;
     line-height: 40px;
     margin: 20px 0px;
     display: flex;
     div:nth-of-type(2){
        color: black;
        font-size: 16px;
        margin: 0px 20px;
     }
     div:nth-of-type(3){
        color: black;
        font-size: 15px;
     }
   }

.tableBox {
  margin-bottom: 20px;

}

.declareBox {
  width: 1220px;
  height: 100%;
  background: #FFFFFF;
  margin: 30px auto;
  box-sizing: border-box;
  padding: 10px 50px;

  .title {
    display: flex;

    div:nth-of-type(1) {
      width: 120px;
      height: 50px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #262626;
      line-height: 50px;
      margin-bottom: 20px;
      border-bottom: 4px #1285D7 solid;

    }

    div:nth-of-type(2) {
      height: 50px;
      font-size: 15px;
      font-family: Arial;
      font-weight: 400;
      color: #DCDCDC;
      line-height: 50px;
      margin-right: 5px;

      border-bottom: 4px #1285D7 solid;

    }

    div:nth-of-type(3) {
      width: 189px;
      height: 50px;
      font-size: 15px;
      font-family: Arial;
      font-weight: 400;
      color: #DCDCDC;
      line-height: 50px;

      border-bottom: 4px #1285D7 solid;

    }

  }


}

.fujian {
  width: 1136px;
  height: 55px;
  background: #EBF5FC;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #1285D7;
  line-height: 55px;
  margin: 10px 0px;
  padding-left: 20px;
  cursor: pointer;
}

.lianxi {
  display: flex;
  margin-bottom: 50px;

  div {
    width: 230px;
    height: 55px;
    background: #FAFAFA;
    border: 2px solid #EEEEEE;
    line-height: 55px;
    text-align: center;
  }

  div:nth-of-type(1) {
    width: 30%;
  }
}

.tableFoot {
  width: 100%;
  display: flex;
  justify-content: center;

  button {
    margin: 0px 10px;

    &:hover {
      cursor: pointer;
    }
  }

  button:nth-of-type(1) {
    width: 98px;
    height: 40px;
    background: #F39200;
    border: 0;
    border-radius: 3px 3px 3px 3px;
    color: white;
  }

  button:nth-of-type(2) {
    width: 98px;
    height: 40px;
    background: #2797E8;
    border-radius: 3px 3px 3px 3px;
    border: 0;

    color: white;
  }

  button:nth-of-type(3) {
    width: 98px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 3px 3px 3px 3px;
    color: white;
    border: 0;
  }
}

.name {
  width: 208px;
  height: 45px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #FD8544;
}

.text {
  cursor: pointer;
  color: #1285D7;
}

.iconDownload {
  height: 14px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #1285D7;
}

.el-table__header {
  background-color: #1285D7 !important;
  color: white;
}

::v-deep .el-table__header th.is-leaf,
::v-deep .el-table__header th.gutter {
  background-color: #1285D7 !important;
  color: white;
  font-size: 16px;
}

.status {
  width: 48px;
  height: 16px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #D62502;
}

.yijian {
  color: #2797E8;
  cursor: pointer;
}

.el-button--primary {
  background-color: #fd8544;
  border-color: #fd8544;
}
</style>